<template>
	<div id="bigScreenBodyDiv" class="bigScreenBodyDiv">
		<div class="bigScreenHeader">
			<div :style="TitleBackground" style="width:100%;height:100%;background-size: 100% 100%;display:flex;">
				<div style="width:100%;height:100%;display:flex;">
					<div style="width:33%;height:100%;display:flex;">
						<div style="width:3vw;height:100%;font-size:1vw;padding-top: 1vw;color: #55aaff;">
							<!--<ScreenFull @listenToScreenFull="changeScreenFull"></ScreenFull>-->
						</div>
						<div id="dateanweekDiv" style="flex: 1;height:100%;text-align:center;color:#ffffff;font-size:1vw;">
							
						</div>
					</div>
					<div style="width:34%;height:100%;text-align:center;color:#ffffff;display: table;">
						<p style="font-size:1.5vw;display: table-cell;vertical-align: middle;">天津市重点用车单位门禁联网监控综合管理平台</p>
					</div>
					<div style="width:33%;height:100%;text-align:center;display:flex;z-index:1;display: flex;">
						<div style="flex: 1;height:100%;text-align: center;"></div>
						
						<div style="width: 3vw;height:100%;text-align: center;">
							
						</div>
						<div style="width: 3vw;height:100%;text-align: center;">
							
						</div>
					</div>
				</div>
			</div>
		</div>
		
		<div class="bigScreenBodyDivMain">
			<div id="" style="width: 100%;height: 100%;">
				<div class="home_div">
					<div class="map_menu">
					    <el-radio-group v-model="layerShowType" size="mini" @change="changeLayerShowType">
							<el-radio-button label="baseDT">默认地图</el-radio-button>
					    	<el-radio-button label="satellite">卫星地图</el-radio-button>
					    </el-radio-group>
						<el-checkbox v-model="EFshowType" style="margin: 5px 0px 0px 10px;" @change="changeEFshowType">电子围栏</el-checkbox>
					</div>
					<div class="map_left">
						<div id="mainLeft" style="width: 100%;height: 100%;display: flex;flex-direction: column;padding: 5px 0px 0px 10px;">
							<div id="" style="width: 100%;height: 7%;display: flex;">
								<div style="width: 3%;height: 100%;text-align:center;">
									
								</div>
								<div style="width: 18%;height: 100%;text-align:center;display: flex;flex-direction: column;">
									<div style="width: 100%;height: 70%;">
										<el-image :src="lianwangImage"></el-image>
									</div>
									<div style="width: 100%;height: 30%;color: #00aaff;font-size: 0.8vw;">
										联网企业
									</div>
								</div>
								<div style="width: 29%;height: 100%;text-align:left;color: #ffaa00;font-size: 2.2vw;display: table;">
									<div style="display: table-cell;vertical-align: middle;">
										{{lianwangCount}}
										<span style="color: #00aaff;font-size: 0.8vw;">家</span>
									</div>
								</div>
								<div style="width: 3%;height: 100%;text-align:center;">
									
								</div>
								<div style="width: 18%;height: 100%;text-align:center;display: flex;flex-direction: column;">
									<div style="width: 100%;height: 70%;">
										<el-image :src="pingjiImage"></el-image>
									</div>
									<div style="width: 100%;height: 30%;color: #00aaff;font-size: 0.8vw;">
										评级企业
									</div>
								</div>
								<div style="width: 29%;height: 100%;text-align:left;color: #6ad69f;font-size: 2.2vw;display: table;">
									<div style="display: table-cell;vertical-align: middle;">
										{{pingjiCount}}
										<span style="color: #00aaff;font-size: 0.8vw;">家</span>
									</div>
								</div>
							</div>
							<!--
							<div id="" style="width: 100%;height: 30%;padding-top: 10px;display: flex;">
								<div style="width: 50%;height: 100%;display: flex;flex-direction: column;">
									<div id="" class="blockTitle">
										<div class="blockTitleText">
											各区企业占比
										</div>
									</div>
									<div id="areaDataDiv" style="width: 100%;flex: 1;">
										
									</div>
								</div>
								<div style="width: 50%;height: 100%;display: flex;flex-direction: column;">
									<div id="" class="blockTitle">
										<div class="blockTitleText">
											各行业企业占比
										</div>
									</div>
									<div id="industryDataDiv" style="width: 100%;flex: 1;">
										
									</div>
								</div>
								
							</div>
							-->
							<div id="" style="width: 100%;height: 23%;display: flex;flex-direction: column;">
								<div id="" class="blockTitle">
									<div class="blockTitleText">
										各区企业占比
									</div>
								</div>
								<div id="areaDataDiv" style="width: 100%;flex: 1;">
									
								</div>
							</div>
							<div id="" style="width: 100%;height: 23%;display: flex;flex-direction: column;">
								<div id="" class="blockTitle">
									<div class="blockTitleText">
										各行业企业占比
									</div>
								</div>
								<div id="industryDataDiv" style="width: 100%;flex: 1;">
									
								</div>
							</div>
							<div id="" style="width: 100%;height: 25%;padding-top: 0px;display: flex;flex-direction: column;">
								<div id="" class="blockTitle">
									<div class="blockTitleText">
										各区评级企业联网统计
									</div>
								</div>
								<div id="areaInlineDataDiv" style="width: 100%;flex: 1;">
									
								</div>
							</div>
							<div id="" style="width: 100%;height: 22%;padding-top: 0px;display: flex;flex-direction: column;">
								<div id="" class="blockTitle">
									<div class="blockTitleText">
										近一周统计
									</div>
								</div>
								<div id="weekDataDiv" style="width: 100%;flex: 1;">
									
								</div>
							</div>
						</div>
					</div>
					<div class="map_right">
						<div id="mainLeft" style="width: 100%;height: 100%;display: flex;flex-direction: column;padding: 5px 0px 0px 10px;">
							<div id="" style="width: 100%;height: 7%;display: flex;">
								<div style="width: 2%;height: 100%;text-align:center;">
									
								</div>
								<div style="width: 18%;height: 100%;text-align:center;display: flex;flex-direction: column;">
									<div style="width: 100%;height: 70%;">
										<el-image :src="shangbaojiluImage"></el-image>
									</div>
									<div style="width: 100%;height: 30%;color: #00aaff;font-size: 0.8vw;">
										上报记录
									</div>
								</div>
								<div style="width: 30%;height: 100%;text-align:left;color: #6ad69f;font-size: 2.2vw;display: table;">
									<div style="display: table-cell;vertical-align: middle;">
										{{shangbaojiluCount}}
										<span style="color: #00aaff;font-size: 0.8vw;">万条</span>
									</div>
								</div>
								<div style="width: 2%;height: 100%;text-align:center;">
									
								</div>
								<div style="width: 18%;height: 100%;text-align:center;display: flex;flex-direction: column;">
									<div style="width: 100%;height: 70%;">
										<el-image :src="dangrishangbaoImage"></el-image>
									</div>
									<div style="width: 100%;height: 30%;color: #00aaff;font-size: 0.8vw;">
										当日上报
									</div>
								</div>
								<div style="width: 30%;height: 100%;text-align:left;color: #ffaa00;font-size: 2.2vw;display: table;">
									<div style="display: table-cell;vertical-align: middle;">
										{{dangrishangbaoCount}}
										<span style="color: #00aaff;font-size: 0.8vw;">条</span>
									</div>
								</div>
							</div>
							<div id="" style="width: 100%;height: 35%;padding-top: 10px;display: flex;flex-direction: column;">
								<div id="" class="blockTitle">
									<div class="blockTitleText">
										当日企业/园区进场记录<span style="color: #ffaa00;">Top15</span>
									</div>
								</div>
								<div id="todayInDataDiv" style="width: 100%;flex: 1;">
									
								</div>
							</div>
							<div id="" style="width: 100%;height: 25%;padding-top: 0px;display: flex;flex-direction: column;">
								<div id="" class="blockTitle">
									<div class="blockTitleText">
										排放阶段统计
									</div>
								</div>
								<div id="stageDataDiv" style="width: 100%;flex: 1;">
									
								</div>
							</div>
							<div id="" style="width: 100%;height: 16%;display: flex;flex-direction: column;">
								<div id="" class="blockTitle">
									<div class="blockTitleText">
										车辆告警
									</div>
								</div>
								<div id="warningCarDataDiv" style="width: 100%;flex: 1;overflow-y: auto;">
									<div v-for="item in warningCarDataList" style="width: 100%;height: 1vw;line-height: 1vw;text-align: center;color: #00aaff;font-size: 0.7vw;display: flex;">
										<span id="" style="width: 50%;height: 100%;" @click="openComDetailFromWarning(item)">
											{{ item.reason.split("[")[2].replace("]","") }}
										</span>
										<span id="" style="width: 20%;height: 100%;color: #ff6e06;font-weight: bold;" @click="openCarDetailFromWarning(item)">
											{{ item.subject }}
										</span>
										<span id="" style="width: 30%;height: 100%;">
											{{ item.actTime }}
										</span>
									</div>
								</div>
							</div>
							<div id="" style="width: 100%;height: 16%;display: flex;flex-direction: column;">
								<div id="" class="blockTitle">
									<div class="blockTitleText">
										企业告警
										<!--<span style="color:#ffaa00;">（上报率低于80%）</span>-->
									</div>
								</div>
								<div id="warningComDataDiv" style="width: 100%;flex: 1;overflow-y: auto;">
									<div v-for="item in warningComDataList" style="width: 100%;height: 1vw;line-height: 1vw;text-align: center;color: #00aaff;font-size: 0.7vw;display: flex;">
										<span id="" style="width: 50%;height: 100%;">
											{{ item.subject }}
										</span>
										<span id="" style="width: 20%;height: 100%;font-weight: bold;">
											<span style="color: #ff6e06;">{{ item.reason.split("[")[1].split("]")[0] }}</span>
											<span style="color: #00ffff;">/ {{ item.reason.split("（")[1].split("）")[0] }}</span>
										</span>
										<span id="" style="width: 30%;height: 100%;">
											{{ item.actTime }}
										</span>
									</div>
								</div>
							</div>
						</div>
					</div>
					<div id="container"></div>
				</div>
			</div>
		</div>
		<tabsDialog :tabsDialogParams="tabsDialogParams"></tabsDialog>
		<!-- <carRecordDialog :carDialogParams="carDialogParams"></carRecordDialog> -->
	</div>
</template>

<script>
import { getToken, setToken, removeToken } from '@/utils/auth';
//添加高德地图密钥
window._AMapSecurityConfig = {
	securityJsCode: "2756b5e31610e463de19415cb1b13084"
}
import AMapLoader from '@amap/amap-jsapi-loader';
import ScreenFull from '@/components/Screenfull/index.vue';
import tabsDialog from '@/components/tabsDialog/tabsDialog.vue';
import carRecordDialog from '@/components/carRecordDialog/carRecordDialog.vue';
import moment from "moment";
import * as echarts from 'echarts';
import iconDeviceClick from "@/assets/icons/dianwei-1-you.png";
import iconDevice from "@/assets/icons/dianwei-1-qingdu.png";
import iconEnter from "@/assets/icons/hezuo/enter1-32.png";
import { 
	getComDataTotalAndPer,
	getAreaInlineData,
	getWeekData,
	getReportDataAndTop,
	getStageData,
	getWarningCarData,
	getWarningComData,
	getMapComData,
} from '@/api/hzMJPT/mainInterface.js';
export default {
	components:{
	    ScreenFull,
		tabsDialog,
		carRecordDialog
	},
	inject:['reload'],
	data(){
	    return {
			commonUrl: process.env.VUE_APP_COMMON_URL,
			isScreenFull: false,
			TitleBackground: {
				backgroundImage:'url(' + require('@/assets/image/title2.png') + ')'
			},
			BodyBackground: {
				backgroundImage:'url(' + require('@/assets/image/background1-2.jpg') + ')'
			},
			//数量展示
			lianwangImage: require('@/assets/image/lianwang2-36-2.png'),
			pingjiImage: require('@/assets/image/pingji1-36.png'),
			shangbaojiluImage: require('@/assets/image/shangbaojilu1-36.png'),
			dangrishangbaoImage: require('@/assets/image/dangrishangbao1-32.png'),
			lianwangCount: 9999,
			pingjiCount: 8888,
			shangbaojiluCount: 99.99,
			dangrishangbaoCount: 8888,
			//图形展示
			areaDataChart: null,
			industryDataChart: null,
			areaInlineDataChart: null,
			weekDataChart: null,
			todayInDataChart: null,
			stageDataChart: null,
			warningCarDataList: [],
			warningComDataList: [],
			
			//地图相关
			layerShowType: 'baseDT',
			EFshowType: false,
			layers: [],
			EFArray: [],
			EFPolygons: [],
			oldZoomLevel: 9,
			showLable: false,
			mainCenter: [117.390225,39.396636],
			markers: [],
			districtSearch: null,
			companyTableList: [],
			currMarketData: null,
			currPolygon: null,
			hasOpenedEF: false,
			//企业详情弹窗
			tabsDialogParams: {
				dialogVisible: false,
				openType: null,
				objItem: null,
			},
			//车辆通行记录弹窗
			carDialogParams: {
				dialogVisible: false,
				objRecord: null,
			},
			//测试数据
			companyTableListTest: [
				{
					"id": 1,
					"comName": "测试企业信息测试企业信息测试企业信息1",
					"longitude": 117.081338,
					"latitude": 39.146606,
					"ElectronicFence": [[117.081338,39.146606], [117.080211,39.146502], [117.08027,39.145995], [117.081402,39.146095]],
					"centerPoint": [117.081338,39.146606],
					"area": "西青区",
					"instruct": "水泥",
					"grade": "A",
					"PWcode": "123456789123456789",
					"lianxiren": "王主任",
					"tel": "15812345678",
					"address": "天津市西青区金霞路18号天津市西青区金霞路18号",
					"enterList": [
						{
							"enterName": "东门",
							"longitude": 117.081338,
							"latitude": 39.146206,
							"enterPoint": [117.081338,39.146206],
						},
						{
							"enterName": "西门",
							"longitude": 117.081338,
							"latitude": 39.146206,
							"enterPoint": [117.080028,39.146206],
						}
						
					]
				},
				
			],
		}
	},
	created() {
		//this.initWebSocket();
	},
	mounted() {
		window.mapVue = this;
		this.setComDataTotalAndPer();
		this.initAMap();
		//this.setAreaData();
		//this.setIndustryData();
		this.setAreaInlineData();
		this.setWeekData();
		this.setReportDataAndTop();
		//this.setTodayInData();
		this.setStageData();
		this.setWarningCarData();
		this.setWarningComData();
		
		window.addEventListener("resize",()=>{
			//alert("屏幕大小发生变化");
			this.setComDataTotalAndPer();
			//this.setAreaData();
			//this.setIndustryData();
			this.setAreaInlineData();
			this.setWeekData();
			this.setReportDataAndTop();
			//this.setTodayInData();
			this.setStageData();
			this.setWarningCarData();
			this.setWarningComData();
			
		});
	},
	destroyed: function () { // 离开页面生命周期函数
		//this.websocketclose();
	},
    methods: {
		//根据屏幕大小自动计算Echart图标内字体大小
		autoFontSize(res){
			let clientWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
			if (!clientWidth) return;
			let fontSize = 100 * (clientWidth / 1920);
			return res * fontSize;
		},
		//全屏
		changeScreenFull(flag){
			this.isScreenFull = flag;
			if (this.isScreenFull == true)
			{
				clearTimeout(this.timer); 
				this.timer = setTimeout(()=>{ 
					
				},100);
			}
			else
			{
				clearTimeout(this.timer);
				this.reload();
			}
		},
		//地图相关
		loadMapCallback() {
			//alert("ok");
		},
		initAMap(){
			AMapLoader.reset();
			AMapLoader.load({
				key:'327759cbeffa99a7b771d37f4ee42307',  //设置您的key
				version:"1.4.15",
				plugins:[],
				AMapUI:{
					version:"1.1",
					plugins:[]
				},
				Loca:{
					version:"1.3.2"
				},
				//callback: window.mapVue.loadMapCallback(),
			}).then((AMap)=>{
				//地图图层
				var map = new AMap.Map("container",{
					viewMode:"2D",
					zoom:this.autoFontSize(0.04),
					zoom:9,
					zooms:[2,22],
					center:this.mainCenter,  //天津
					//center: [104.925825,36.695811],   //中国
					resizeEnable: true,
					//pitch: 45,
					//mapStyle: 'amap://styles/blue',
					mapStyle: 'amap://styles/darkblue',
					//mapStyle: 'amap://styles/grey',
					//features: ["bg","road","building"]
				});
				//添加控制器
				var districtSearch = null;
				var disProvince = null;
				//此方式为异步加载插件，需要在插件加载完后进行插件的使用
				AMap.plugin([
					'AMap.MapType',
					'AMap.ControlBar',
					'AMap.TileLayer.Traffic',
					'AMap.TileLayer.Satellite',
					'AMap.TileLayer.RoadNet',
					'AMap.ToolBar',
					'AMap.Scale',
					'AMap.OverView',
					'AMap.Geolocation',
					'AMap.DistrictSearch',
					'AMap.DistrictLayer',
					'AMap.LabelsLayer',
				], function(){
					// 添加 3D 罗盘控制
					/*
					var ControlBar = new AMap.ControlBar({
						position: {
							top: '10px',
							left: '100px'
						}
					});
					*/
					//map.addControl(ControlBar);
					/*
					var layers = [
						new AMap.TileLayer.Satellite()
					];
					map.setLayers(layers);
					*/
					// 添加图层选择
					/*
					var MapType = new AMap.MapType({
						position: {
							top: '100px',
							left: '100px'
						}
					});
					map.addControl(MapType);
					//MapType.hide();
					*/
					
					disProvince = new AMap.DistrictLayer.Province({
						zIndex: 12,
						adcode: [120100],
						depth: 2,
						styles: {
							'fill': function (properties) {
								// properties为可用于做样式映射的字段，包含
								// NAME_CHN:中文名称
								// adcode_pro
								// adcode_cit
								// adcode
								//var adcode = properties.adcode;
								//return window.mapVue.getColorByAdcode(adcode);
								return 'rgba(0, 60, 181, 0.1)';
							},
							'province-stroke': 'cornflowerblue',
							'city-stroke': 'white', // 中国地级市边界
							'county-stroke': 'rgba(0, 170, 255, 1.0)' // 中国区县边界
						}
					});
					disProvince.setMap(map);
					
					// 创建行政区查询对象
					districtSearch = new AMap.DistrictSearch({
						// 关键字对应的行政区级别，country表示国家
						level: 'district',
						//  显示下级行政区级数，1表示返回下一级行政区
						subdistrict: 1,
						// 返回行政区边界坐标等具体信息
						extensions: 'all',
					});
					
					map.on('zoomend', function(){
						var zoomLevel = map.getZoom(); // 获取当前地图缩放级别
						window.mapVue.mapZoomend(zoomLevel);
					});
					map.on('complete',function(){
						window.mapVue.map = map;
						window.mapVue.districtSearch = districtSearch;
						window.mapVue.setDistrict("120000");
						window.mapVue.getComData();
						//window.mapVue.beforeSetDistrict();
					});
					/*
					map.on('click',function(){
						
					});
					*/
					
				});
			}).catch(e=>{
				alert(e);
			})
		},
		//切换地图图层
		changeLayerShowType() {
			this.layers = [];
			if (this.layerShowType == 'baseDT')
			{
				var TileLayer = new AMap.TileLayer({
					map: window.mapVue.map,
				});
				this.layers.push(TileLayer);
				this.map.setLayers(this.layers);
			}
			else if (this.layerShowType == 'satellite')
			{
				var Satellite = new AMap.TileLayer.Satellite({
					map: window.mapVue.map,
				});
				var roadNet = new AMap.TileLayer.RoadNet();
				this.layers.push(Satellite);
				this.layers.push(roadNet);
				this.map.setLayers(this.layers);
			}
			else
			{
				var TileLayer = new AMap.TileLayer({
					map: window.mapVue.map,
				});
				this.layers.push(TileLayer);
				this.map.setLayers(this.layers);
			}
			
		},
		//显示电子围栏图层
		changeEFshowType() {
			if (this.EFshowType == true)
			{
				var EFdatalist = this.EFArray;
				//alert("显示电子围栏图层");
				for (var i=0;i<EFdatalist.length;i++)
				{
					var tempPolygon = new AMap.Polygon({
						map: window.mapVue.map,
						path: EFdatalist[i],
						strokeColor: "#00ffff",
						strokeWeight: 2,
						strokeOpacity: 0.8,
						fillColor: '#27a8bc',
						fillOpacity: 0.6,
						zIndex: 50,
						bubble: true,
					});
					window.mapVue.EFPolygons.push(tempPolygon);
					window.mapVue.map.add(window.mapVue.EFPolygons);
				}
				
			}
			else
			{
				//alert("关闭电子围栏图层");
				this.map.remove(this.EFPolygons);
				this.EFPolygons = [];
			}
		},
		//地图缩放后事件监听
		mapZoomend(zoomLevel) {
			//alert(this.oldZoomLevel);
			//alert(zoomLevel);
			if ((this.oldZoomLevel < 13)&&(zoomLevel >= 13))
			{
				//alert("显示图层");
				this.showLable = true;
				this.setmapPointMarkers();
				this.oldZoomLevel = zoomLevel;
			}
			else if ((this.oldZoomLevel >= 13)&&(zoomLevel < 13))
			{
				//alert("隐藏图层");
				this.showLable = false;
				this.setmapPointMarkers();
				this.oldZoomLevel = zoomLevel;
			}
			else
			{
				this.oldZoomLevel = zoomLevel;
			}
			
		},
		//行政区域下各子区域样式
		// 颜色辅助方法
		getColorByAdcode(adcode) {
			return 'rgba(0, 60, 181, 0.3)';
			/*
			if (!colors[adcode]) {
			    var gb = Math.random() * 155 + 50;
			    colors[adcode] = 'rgb(' + gb + ',' + gb + ',255)';
			}
					
			return colors[adcode];
			*/
		},
		// 加载区域框架
		setDistrict(areaName) {
			this.districtSearch.search(areaName, function(status, result) {
				if (status == 'complete')
				{
					// 获取边界信息
					var bounds = result.districtList[0].boundaries;
					var polygons = [];
					if (bounds) 
					{
						for (var i = 0, l = bounds.length; i < l; i++) {
							//生成行政区划polygon
							var polygon = new AMap.Polygon({
								map: window.mapVue.map,
								strokeWeight: 2,
								path: bounds[i],
								fillOpacity: 0.1,
								fillColor: '#CCF3FF',
								strokeColor: '#00aaff'
							})
							polygons.push(polygon)
						}
						// 地图自适应
						//window.mapVue.map.setFitView();
					}
				}
			});
		},
		//获取企业点位信息
		getComData() {
			getMapComData().then(res => {
				this.companyTableList = res.data;
				this.setmapPointMarkers();
			}).catch(error => {
			
			});
		},
		//加载地图点位信息
		setmapPointMarkers() {
			this.map.remove(this.markers);
			this.markers = [];
			var markersList = this.companyTableList;
			//var markersList = res.rows;
			for (var i=0;i<markersList.length;i++)
			{
				/*
				if (!((markersList[i].longitude)&&(markersList[i].latitude))||((markersList[i].longitude == "null")||(markersList[i].latitude == "null"))||((markersList[i].longitude == "undefined")||(markersList[i].latitude == "undefined"))||((markersList[i].longitude.indexOf("°") > 0)||(markersList[i].latitude.indexOf("°") > 0))||((markersList[i].longitude.split(".").length > 2)||(markersList[i].latitude.split(".").length > 2))||((markersList[i].longitude.indexOf("'") > 0)||(markersList[i].latitude.indexOf("'") > 0))||((markersList[i].longitude.indexOf("′") > 0)||(markersList[i].latitude.indexOf("′") > 0))||((markersList[i].longitude.indexOf("″") > 0)||(markersList[i].latitude.indexOf("″") > 0))||((markersList[i].longitude.indexOf("无") > 0)||(markersList[i].latitude.indexOf("无") > 0)))
				{
					continue;
				}
				*/
				
				if ((markersList[i].longitude == "无")||(markersList[i].latitude == "无"))
				{
					continue;
				}
				if ((markersList[i].longitude == "null")||(markersList[i].latitude == "null"))
				{
					continue;
				}
				if ((markersList[i].longitude == "undefined")||(markersList[i].latitude == "undefined"))
				{
					continue;
				}
				if ((markersList[i].longitude == "")||(markersList[i].latitude == ""))
				{
					continue;
				}
				var currIcon = iconDevice;
				var GCJPoint = this.translateToGCJ(markersList[i].longitude,markersList[i].latitude);
				//var LngLat = new AMap.LngLat(GCJPoint.lon,GCJPoint.lat);
				var LngLat = new AMap.LngLat(markersList[i].longitude,markersList[i].latitude);
				
				var marker = new AMap.Marker({
					icon: currIcon,
					position: LngLat,
					extData: markersList[i],
					label: {
						content: window.mapVue.showLable?markersList[i].companyName:"",
						direction: 'top',
					}
				});
				marker.on('mouseover', window.mapVue.openInfoWindow);
				marker.on('mouseout', window.mapVue.closeInfoWindow);
				//marker.on('click', window.mapVue.markerClick);
				this.markers.push(marker);
				this.map.add(this.markers);
				
				this.EFArray = [[[117.081338,39.146606], [117.080211,39.146502], [117.08027,39.145995], [117.081402,39.146095]],[[117.521212, 39.593939], [117.521212, 39.595939], [117.531212, 39.595939], [117.531212, 39.593939]]]
			}
		},
		openInfoWindow(e) {
			this.currMarketData = e.target.getExtData();
			var info = [];
			//标题
			info.push('<div style="width: 250px;height: 30px;line-height:30px;padding:0px 0px 0px 10px;color:#ffffff;border-radius: 5px 5px 0 0;background-color:#00aaff;opacity: 0.9;font-size: 16px;">概要信息<span id="infoWindow" style="float:right;padding-right:5px;" onclick="window.mapVue.closeInfoWindow()">x</span></div>');
			//内容-start
			info.push('<div style="width: 250px;height: auto;padding:10px;border-radius: 0px 0px 5px 5px;background-color:#003c5a;opacity: 0.9;font-size: 14px;display: flex;flex-direction: column;">');
			
			info.push('<div id="" style="width: 100%;color:#00aaff;height: auto;">名称：');
			info.push('<span style="color:#56d9c8;">' + this.currMarketData.companyName + '</span>');
			info.push('</div>');
			
			info.push('<div id="" style="width: 100%;color:#00aaff;height: auto;margin-top:5px;">地址：');
			info.push('<span style="color:#56d9c8;">' + this.currMarketData.address + '</span>');
			info.push('</div>');
			
			info.push('<div id="" style="width: 100%;color:#00aaff;height: 40px;padding-top:10px;align-item:center;display:flex;">');
			/*
			if (this.hasOpenedEF)
			{
				info.push('<div style="width: 90px;height:28px;background-color:#ffaa00;color:#ffffff;padding: 4px 10px;text-align: center;border-radius: 5px;" onclick="window.mapVue.closeEF()">关闭围栏</div>');
			}
			else
			{
				info.push('<div style="width: 90px;height:28px;background-color:#ffaa00;color:#ffffff;padding: 4px 10px;text-align: center;border-radius: 5px;" onclick="window.mapVue.openEF()">显示围栏</div>');
			}
			*/
			//info.push('<div style="width: 90px;height:28px;background-color:#ffaa00;color:#ffffff;padding: 4px 10px;text-align: center;border-radius: 5px;" onclick="window.mapVue.openEF()">显示围栏</div>');
			info.push('<div style="width: 90px;height:28px;background-color:#00aaff;color:#ffffff;padding: 4px 10px;text-align: center;border-radius: 5px;margin-left:0px;" onclick="window.mapVue.openComDetailDialog()">企业详情</div>');
			info.push('</div>');
			/*
			info.push('<div id="" style="width: 100%;color:#00aaff;height: 30px;padding-top:5px;">经度：');
			info.push('<span style="color:#56d9c8;">' + marketData.longitude + '</span>');
			info.push('</div>');
			
			info.push('<div id="" style="width: 100%;color:#00aaff;height: 30px;padding-top:5px;">纬度：');
			info.push('<span style="color:#56d9c8;">' + marketData.latitude + '</span>');
			info.push('</div>');
			*/
			
			info.push('</div>');
			
			window.mapVue.infoWindow = new AMap.InfoWindow({
				anchor: 'middle-right',
				autoMove: true,
				closeWhenClickMap: true,
				isCustom: true,
				content: info.join(""),
				offset: new AMap.Pixel(0, -10)
			});
			
			window.mapVue.infoWindow.open(window.mapVue.map,e.target.getPosition());
			
		},
		closeInfoWindow() {
			this.map.clearInfoWindow();
		},
		//地图显示单个站点围栏信息
		openEF() {
			this.currMarketData = this.companyTableListTest[0];
			this.map.clearInfoWindow();
			this.map.setZoomAndCenter(18,this.currMarketData.centerPoint);
			this.currPolygon = null;
			this.hasOpenedEF = true;
			//var data = this.currMarketData;
			this.currPolygon = new AMap.Polygon({
				map: window.mapVue.map,
				path: window.mapVue.currMarketData.ElectronicFence,
				strokeColor: "#00ffff",
				strokeWeight: 2,
				strokeOpacity: 0.8,
				fillColor: '#27a8bc',
				fillOpacity: 0.6,
				zIndex: 50,
				bubble: true,
				/*
				extData: {
					id: data.id,
					name: data.name,
					company: data.company,
					principalName: data.principalName,
					principalPhone: data.principalPhone,
					memo: data.memo,
				},
				*/
			});
			/*
			polygon.on('click',function(event){
				window.mapVue.currPolygon = polygon;
				window.mapVue.openInfoWindow(event);
			});
			*/
			var marker = new AMap.Marker({
				icon: iconEnter,
				position: window.mapVue.currMarketData.enterList[0].enterPoint, //此处更换为进出点
				/*
				extData: {
					id: markersList[i].id,
					Name: markersList[i].comName,
					longitude: markersList[i].longitude,
					latitude: markersList[i].latitude,
					address: markersList[i].address,
				},
				*/
				extData: window.mapVue.currMarketData,
				label: {
					content: window.mapVue.currMarketData.enterList[0].enterName,
					direction: 'bottom',
				}
				
			});
			this.map.add(marker);
		},
		closeEF() {
			//alert("关闭围栏");
			this.map.remove(this.currPolygon);
			this.hasOpenedEF = false;
			//alert(this.mainCenter[0]);
			//alert(this.mainCenter[1]);
			var LngLat = new AMap.LngLat(this.mainCenter[0],this.mainCenter[1]);
			this.map.setZoomAndCenter(9,LngLat);
		},
		//地图点击站点事件
		markerClick(e) {
			
		},
		//企业数和企业分布
		setComDataTotalAndPer() {
			getComDataTotalAndPer().then(res => {
				this.setCountData(res);
				this.setAreaData(res);
				this.setIndustryData(res);
			}).catch(error => {
			
			});
		},
		//数量信息显示
		setCountData(res) {
			this.lianwangCount = res.data.companyOnline;
			this.pingjiCount = res.data.companyGrading;
			//this.lianwangCount = 88888;
			//this.pingjiCount = 99999;
		},
		//获取各区企业数据统计
		setAreaData(res) {
			var dataObj = res.data.countyMap;
			var totalCount = 0;
			var dataSource = [];
			var tempData = Object.keys(dataObj).map(key => {
				//return { [key]: obj[key] };
				var subTempData = {
					"name": [key],
					"value": dataObj[key],
				}
				dataSource.push(subTempData);
				totalCount = totalCount + dataObj[key];
			});
			//var totalCount = 550;
			//var dataSource = [{"id":"0","name":"东丽","value":128},{"id":"1","name":"西青","value":96},{"id":"2","name":"津南","value":168},{"id":"3","name":"北辰","value":158},{"id":"4","name":"滨海新区","value":128},{"id":"5","name":"宁河","value":96},{"id":"6","name":"静海","value":168},{"id":"7","name":"武清","value":158},{"id":"8","name":"宝坻","value":168},{"id":"9","name":"蓟州","value":158}];
			this.drawAreaDataChart(totalCount,dataSource);
		},
		drawAreaDataChart(totalCount,dataSource) {
			if (this.areaDataChart != null && this.areaDataChart != "" && this.areaDataChart != undefined){
			    this.areaDataChart.dispose();
			};
			this.areaDataChart = echarts.init(document.getElementById('areaDataDiv'));
			this.areaDataChart.setOption({
				legend: {
					show: false,
					top: '10%',
					left: '10%',
					orient: 'vertical',
					itemGap: 15,
					textStyle: {
						color: '#ffffff'
					},
					formatter(name) {
						var curVlaue = 0;
						for (var i=0; i < dataSource.length; i++) {
							if (dataSource[i].name == name)
							{
								curVlaue = dataSource[i].value;
							}
						}
						return name + " " + curVlaue + "家";
					}
				},
				title: {
					text: "",
					left: 'center',
					textStyle: {
						color: '#ffaa00',
						fontWeight: 'normal',
						fontSize: '14px'
					},
					//backgroundColor: '#4367ba'
					//backgroundColor: '-webkit-linear-gradient(left,#071f56,#4367ba,#071f56)',
				},
				series: [
					{
						name: '各区企业',
						type: 'pie',
						roseType: false,
						//left: '30%',
						radius: ['0%','60%'],
						itemStyle: {
							borderRadius: 5,
							//borderColor: '#436ed0',
							borderWidth: 0
						},
						label: {
							show: true,
							position: 'outside',
							fontSize: this.autoFontSize(0.12),
							color: '#00aaff',
							formatter:function(params)
							{
								var percent = 0;
								if ((totalCount > 0)&&(params.data.value > 0))
								{
									percent = Math.round(params.data.value/totalCount * 100);
								}
								return params.data.name + ":" + params.data.value + "(" + percent + '%)'; //
							}
						},
						labelLine: {
							show: true,
							showAbove:false,
							length: 15,
							length2: 35
						},
						emphasis: {
							label: {
								show: true,
								fontSize: '14',
								color: '#ffaa00'
							}
						},
						data: dataSource
					}
				]
			});
		},
		//获取各行业企业数据统计
		setIndustryData(res) {
			var dataObj = res.data.industryMap;
			var totalCount = 0;
			var dataSource = [];
			var tempData = Object.keys(dataObj).map(key => {
				//return { [key]: obj[key] };
				var subTempData = {
					"name": [key],
					"value": dataObj[key],
				}
				dataSource.push(subTempData);
				totalCount = totalCount + dataObj[key];
			});
			//var totalCount = 550;
			//var dataSource = [{"id":"0","name":"水泥","value":128},{"id":"1","name":"炼钢","value":96},{"id":"2","name":"镀锌","value":168},{"id":"3","name":"炼油","value":158},{"id":"4","name":"橡胶","value":128},{"id":"5","name":"家具","value":96},{"id":"6","name":"其他","value":168}];
			this.drawIndustryDataChart(totalCount,dataSource);
		},
		drawIndustryDataChart(totalCount,dataSource) {
			if (this.industryDataChart != null && this.industryDataChart != "" && this.industryDataChart != undefined){
			    this.industryDataChart.dispose();
			};
			this.industryDataChart = echarts.init(document.getElementById('industryDataDiv'));
			this.industryDataChart.setOption({
				legend: {
					show: false,
					top: '10%',
					left: '10%',
					orient: 'vertical',
					itemGap: 15,
					textStyle: {
						color: '#ffffff'
					},
					formatter(name) {
						var curVlaue = 0;
						for (var i=0; i < dataSource.length; i++) {
							if (dataSource[i].name == name)
							{
								curVlaue = dataSource[i].value;
							}
						}
						return name + " " + curVlaue + "家";
					}
				},
				title: {
					text: "",
					left: 'center',
					textStyle: {
						color: '#ffaa00',
						fontWeight: 'normal',
						fontSize: '14px'
					},
					//backgroundColor: '#4367ba'
					//backgroundColor: '-webkit-linear-gradient(left,#071f56,#4367ba,#071f56)',
				},
				series: [
					{
						name: '各行业企业',
						type: 'pie',
						roseType: false,
						//left: '30%',
						radius: ['0%','60%'],
						itemStyle: {
							borderRadius: 5,
							//borderColor: '#436ed0',
							borderWidth: 0
						},
						label: {
							show: true,
							position: 'outside',
							fontSize: this.autoFontSize(0.12),
							color: '#ffaa00',
							formatter:function(params)
							{
								var percent = 0;
								if ((totalCount > 0)&&(params.data.value > 0))
								{
									percent = Math.round(params.data.value/totalCount * 100);
								}
								return params.data.name + ":" + params.data.value + "(" + percent + '%)'; //
							}
						},
						labelLine: {
							show: true,
							showAbove:false,
							length: 15,
							length2: 35
						},
						emphasis: {
							label: {
								show: true,
								fontSize: '14',
								color: '#00ffff'
							}
						},
						data: dataSource
					}
				]
			});
		},
		//设置各区联网企业数/连网率
		setAreaInlineData() {
			getAreaInlineData().then(res => {
			    var nameArray = [];
			    var dataArray = [];
			    var lineDataArray = [];
			    for (var i=0;i<res.data.length;i++)
				{
					nameArray.push(res.data[i].cname);
					dataArray.push(res.data[i].companyGrading);
					lineDataArray.push(res.data[i].onlineRate);
				}
				this.drawAreaInlineChart(nameArray,dataArray,lineDataArray);
			}).catch(error => {
			
			});
			
			//var nameArray = ["东丽","西青","津南","北辰","滨海新区","武清","静海","宁河","宝坻","蓟州"];
			//var dataArray = [120,168,145,108,178,158,130,96,90,68];
			//var lineDataArray = [100,100,98.62,100,96,100,88,96.88,90,100];
			//this.drawAreaInlineChart(nameArray,dataArray,lineDataArray);
		},
		drawAreaInlineChart(nameArray,dataArray,lineDataArray) {
			if (this.areaInlineDataChart != null && this.areaInlineDataChart != "" && this.areaInlineDataChart != undefined){
			    this.areaInlineDataChart.dispose();
			};
			this.areaInlineDataChart = echarts.init(document.getElementById('areaInlineDataDiv'));
			this.areaInlineDataChart.setOption({
				tooltip: {
					trigger: 'axis',
					axisPointer: {
						type: 'cross',
						//type: 'shadow'
					},
					backgroundColor: 'rgba(30, 54, 124,0.8)',
					borderWidth: '2',
					borderRadius: '5',
					borderColor: 'rgba(30, 159, 255,0.5)',
					textStyle: {
						color: '#ffffff'
					},
					formatter:function (params){
						//return params[0].name + "：" + params[0].value + "";
						return params[0].name + '</br >企业数：' + params[0].value + '</br >联网率：' + params[1].value + '%';
					}
					
				},
				grid: {
					top: '15%',
					left: '10%',
					right: '10%',
					bottom: '20%',
					zlevel: 1
				},
				xAxis: [
					{
						type: 'category',
						data: nameArray,
						axisLine : {
							lineStyle : {
								color : '#00aaff'
							}
						},
						axisLabel: {
							show: true,
							interval: 0,
							rotate: 30,
							color: '#00ffff',
							fontSize: this.autoFontSize(0.12),
						},
						splitLine: {
							lineStyle : {
								color : '#436ed0'
							}
						}
					},
				],
				yAxis: 
				[
					{
						type: 'value',
						name: '企业数',
						position: 'left',
						alignTicks: true,
						nameTextStyle: {
							fontSize: this.autoFontSize(0.12),
						},
						//minInterval: 1,
						axisLine : {
							show: true,
							lineStyle : {
								color : '#00aaff'
							}
						},
						axisLabel: {
							show: true,
							color: '#00aaff',
							fontSize: this.autoFontSize(0.12),
							formatter: function (value, index) {
							    return value;
							}
						},
						splitLine: {
							show: false,
							lineStyle : {
								color : '#436ed0',
								opacity: 0.1
							}
						}
					},
					{
						type: 'value',
						name: '联网率',
						position: 'right',
						alignTicks: true,
						nameTextStyle: {
							fontSize: this.autoFontSize(0.12),
						},
						//minInterval: 1,
						axisLine : {
							show: true,
							lineStyle : {
								color : '#ffaa00'
							}
						},
						axisLabel: {
							show: true,
							color: '#ffaa00',
							fontSize: this.autoFontSize(0.12),
							formatter: function (value, index) {
							    return value + " %";
							}
						},
						splitLine: {
							show: false,
							lineStyle : {
								color : '#436ed0',
								opacity: 0.1
							}
						},
					}
				],
				series: 
				[
					{
						//data: [120, 20, 150, 80, 70, 110, 130],
						name: '企业数',
						data: dataArray,
						type: 'bar',
						barWidth: this.autoFontSize(0.15),
						itemStyle: {
							color: new echarts.graphic.LinearGradient(
								0, 0, 0, 1,
								[
									{offset: 0, color: 'rgba(0, 170, 255, 1.0)'},                   //柱图渐变色
									{offset: 0.5, color: 'rgba(0, 170, 255, 0.8)'},                   //柱图渐变色
									{offset: 1, color: 'rgba(0, 170, 255, 0.5)'},                   //柱图渐变色
								]
							),
							borderRadius:[0,0,0,0]
						},
					},
					{
						name: '联网率',
						data: lineDataArray,
						type: 'line',
						yAxisIndex: 1,
						itemStyle: {
							color: "#ffaa00"
						}
					}
				]
				
			});
		},
		//近一周上报统计
		setWeekData() {
			getWeekData().then(res => {
			    var dataList = res.data;
				var nameArray = [];
				var dataArray = [];
				for (var i=0; i<dataList.length; i++)
				{
					nameArray.push(dataList[i].name.split("-")[1] + "-" + dataList[i].name.split("-")[2]);
					dataArray.push(dataList[i].value);
				}
				this.drawWeekDataChart(nameArray,dataArray);
			}).catch(error => {
			
			});
			
			//var nameArray = ["12-17","12-18","12-19","12-20","12-21","12-22","12-23"];
			//var dataArray = [1450,1080,1580,1780,1200,1680,1300];
			//this.drawWeekDataChart(nameArray,dataArray);
		},
		drawWeekDataChart(nameArray,dataArray) {
			if (this.weekDataChart != null && this.weekDataChart != "" && this.weekDataChart != undefined){
			    this.weekDataChart.dispose();
			};
			this.weekDataChart = echarts.init(document.getElementById('weekDataDiv'));
			this.weekDataChart.setOption({
				tooltip: {
					trigger: 'axis',
					axisPointer: {
						type: 'cross',
						//type: 'shadow'
					},
					backgroundColor: 'rgba(30, 54, 124,0.8)',
					borderWidth: '2',
					borderRadius: '5',
					borderColor: 'rgba(30, 159, 255,0.5)',
					textStyle: {
						color: '#ffffff'
					},
					formatter:function (params){
						//return params[0].name + "：" + params[0].value + "";
						return params[0].name + '</br >进场数：' + params[0].value;
					}
					
				},
				grid: {
					top: '18%',
					left: '10%',
					right: '5%',
					bottom: '20%',
					zlevel: 1
				},
				xAxis: [
					{
						type: 'category',
						data: nameArray,
						axisLine : {
							lineStyle : {
								color : '#00aaff'
							}
						},
						axisLabel: {
							show: true,
							interval: 0,
							rotate: 0,
							color: '#00ffff',
							fontSize: this.autoFontSize(0.12),
						},
						splitLine: {
							lineStyle : {
								color : '#436ed0'
							}
						}
					},
				],
				yAxis: 
				[
					{
						type: 'value',
						name: '进场数',
						position: 'left',
						alignTicks: true,
						nameTextStyle: {
							fontSize: this.autoFontSize(0.12),
						},
						//minInterval: 1,
						axisLine : {
							show: true,
							lineStyle : {
								color : '#00aaff'
							}
						},
						axisLabel: {
							show: true,
							color: '#00aaff',
							fontSize: this.autoFontSize(0.12),
							formatter: function (value, index) {
							    return value;
							}
						},
						splitLine: {
							show: false,
							lineStyle : {
								color : '#436ed0',
								opacity: 0.1
							}
						}
					},
				],
				series: 
				[
					{
						name: '进场数',
						data: dataArray,
						type: 'line',
						barWidth: this.autoFontSize(0.15),
						itemStyle: {
							color: "#00ffff"
						},
						areaStyle: {
							color: new echarts.graphic.LinearGradient(
								0, 0, 0, 1,
								[
									{offset: 0, color: 'rgba(0, 255, 255, 0.3)'},                   //柱图渐变色
									{offset: 0.3, color: 'rgba(0, 255, 255, 0.2)'},                   //柱图渐变色
									{offset: 1, color: 'rgba(0, 255, 255, 0.1)'},                   //柱图渐变色
								]
							),
						}
					},
				]
				
			});
		},
		//获取上报数和企业进出排名top
		setReportDataAndTop() {
			getReportDataAndTop().then(res => {
			    this.shangbaojiluCount = Math.floor(res.data.total/10000);
			    this.dangrishangbaoCount = res.data.today;
			    this.setTodayInData(res);
			}).catch(error => {
			
			});
		},
		//当日企业进场记录排名
		setTodayInData(res) {
			var nameArray = [];
			var dataArray = [];
			var dataList = res.data.list;
			for (var i=(dataList.length-1); i>=0; i--)
			{
				nameArray.push(dataList[i].name);
				dataArray.push(dataList[i].value);
				if (i == 0)
				{
					this.drawTodayInDataChart(nameArray,dataArray);
				}
			}
			
			
			//var nameArray = ["测试企业名称1","测试企业名称1","测试企业名称1","测试企业名称1","测试企业名称1","测试企业名称1","测试企业名称1","测试企业名称1","测试企业名称1","测试企业名称1","测试企业名称1","测试企业名称1","测试企业名称1","测试企业名称1","测试企业名称1"];
			//var dataArray = [-1330,-1350,-1380,-1400,-1430,-1450,-1480,-1500,-1530,-1550,-1580,-1600,-1630,-1650,-1680];
			//var dataArray = [1330,1350,1380,1400,1430,1450,1480,1500,1530,1550,1580,1600,1630,1650,1680];
			//this.drawTodayInDataChart(nameArray,dataArray);
		},
		drawTodayInDataChart(nameArray,dataArray) {
			if (this.todayInDataChart != null && this.todayInDataChart != "" && this.todayInDataChart != undefined){
			    this.todayInDataChart.dispose();
			};
			this.todayInDataChart = echarts.init(document.getElementById('todayInDataDiv'));
			this.todayInDataChart.setOption({
				tooltip: {
					show: false,
					trigger: 'axis',
					axisPointer: {
						type: 'cross',
						//type: 'shadow'
					},
					backgroundColor: 'rgba(30, 54, 124,0.8)',
					borderWidth: '2',
					borderRadius: '5',
					borderColor: 'rgba(30, 159, 255,0.5)',
					textStyle: {
						color: '#ffffff'
					},
					formatter:function (params){
						//return params[0].name + "：" + params[0].value + "";
						return params[0].name + '</br >进场数：' + params[0].value;
					}
					
				},
				grid: {
					top: '5%',
					left: '50%',
					right: '10%',
					bottom: '5%',
					zlevel: 1
				},
				xAxis: [
					{
						type: 'value',
						name: '',
						alignTicks: true,
						nameTextStyle: {
							fontSize: this.autoFontSize(0.12),
						},
						//minInterval: 1,
						axisLine : {
							show: false,
							lineStyle : {
								color : '#00aaff'
							}
						},
						axisLabel: {
							show: false,
							color: '#00aaff',
							fontSize: this.autoFontSize(0.12),
							formatter: function (value, index) {
							    return value;
							}
						},
						splitLine: {
							show: false,
							lineStyle : {
								color : '#436ed0',
								opacity: 0.1
							}
						}
					},
				],
				yAxis: 
				[
					{
						type: 'category',
						data: nameArray,
						//position: 'left',
						axisLine : {
							show: true,
							lineStyle : {
								color : '#00aaff'
							}
						},
						axisTick: {
							show: true,
						},
						axisLabel: {
							show: true,
							interval: 0,
							rotate: 0,
							color: '#00ffff',
							inside: false,
							//margin: 80,
							fontSize: this.autoFontSize(0.12),
						},
						splitLine: {
							show: false,
							lineStyle : {
								color : '#436ed0'
							}
						}
					},
				],
				series: 
				[
					{
						name: '进场数',
						data: dataArray,
						type: 'bar',
						barWidth: this.autoFontSize(0.1),
						label: {
							show: true,
							position: 'right',
							color: '#ffaa00',
							formatter: function (obj, index) {
								return (obj.value);
							}
						},
						emphasis: {
							focus: 'series'
						},
						itemStyle: {
							color: new echarts.graphic.LinearGradient(
								0, 0, 1, 0,
								[
									//柱图渐变色
									{offset: 1, color: 'rgba(0, 255, 255, 0.6)'},
									{offset: 0.5, color: 'rgba(0, 255, 255, 0.3)'},
									{offset: 0, color: 'rgba(0, 255, 255, 0.1)'},
								],
							),
							borderRadius:[5,5,5,5]
						}
					},
				]
			});
		},
		setStageData() {
			getStageData().then(res => {
			    var dataList = res.data;
				var totalCount = 0;
				for (var i=0; i<dataList.length; i++)
				{
					totalCount = totalCount + dataList[i].value;
				}
				this.drawStageDataChart(totalCount,dataList);
			}).catch(error => {
			
			});
			
			//var totalCount = 550;
			//var dataSource = [{"id":"0","name":"新能源","value":128},{"id":"1","name":"国六","value":96},{"id":"2","name":"国五","value":168},{"id":"3","name":"国四","value":158},{"id":"4","name":"国三","value":128},{"id":"6","name":"其他","value":168}];
			//this.drawStageDataChart(totalCount,dataSource);
		},
		drawStageDataChart(totalCount,dataSource) {
			if (this.stageDataChart != null && this.stageDataChart != "" && this.stageDataChart != undefined){
			    this.stageDataChart.dispose();
			};
			this.stageDataChart = echarts.init(document.getElementById('stageDataDiv'));
			this.stageDataChart.setOption({
				legend: {
					show: false,
					top: '10%',
					left: '10%',
					orient: 'vertical',
					itemGap: 15,
					textStyle: {
						color: '#ffffff'
					},
					formatter(name) {
						var curVlaue = 0;
						for (var i=0; i < dataSource.length; i++) {
							if (dataSource[i].name == name)
							{
								curVlaue = dataSource[i].value;
							}
						}
						return name + " " + curVlaue + "家";
					}
				},
				grid: {
					top: '15%',
					left: '10%',
					right: '5%',
					bottom: '5%',
					zlevel: 1
				},
				title: {
					text: "",
					left: 'center',
					textStyle: {
						color: '#ffaa00',
						fontWeight: 'normal',
						fontSize: '14px'
					},
					//backgroundColor: '#4367ba'
					//backgroundColor: '-webkit-linear-gradient(left,#071f56,#4367ba,#071f56)',
				},
				series: [
					{
						name: '各行业企业',
						type: 'pie',
						roseType: false,
						//left: '30%',
						radius: ['0%','70%'],
						itemStyle: {
							borderRadius: 5,
							//borderColor: '#436ed0',
							borderWidth: 0
						},
						label: {
							show: true,
							position: 'outside',
							fontSize: this.autoFontSize(0.12),
							color: '#ffaa00',
							formatter:function(params)
							{
								var percent = 0;
								if ((totalCount > 0)&&(params.data.value > 0))
								{
									percent = (params.data.value/totalCount * 100).toFixed(1);
								}
								return params.data.name + ": " + params.data.value + "(" + percent + '%)'; //
							}
						},
						labelLine: {
							show: true,
							showAbove:false,
							length: 15,
							length2: 25
						},
						emphasis: {
							label: {
								show: true,
								fontSize: '14',
								color: '#00ffff'
							}
						},
						data: dataSource
					}
				]
			});
		},
		//设置车辆预警数据
		setWarningCarData() {
			getWarningCarData().then(res => {
			    this.warningCarDataList = res.data;
			}).catch(error => {
			
			});
			var warningCarDataListTest = [
				{
					"carNum": "津D68765",
					"time": "2024-12-18 23:28:59",
					"comName": "测试企业名称测试企业名称1"
				},
				{
					"carNum": "津D68765",
					"time": "2024-12-18 23:28:59",
					"comName": "测试企业名称测试企业名称2"
				},
				{
					"carNum": "津D68765",
					"time": "2024-12-18 23:28:59",
					"comName": "测试企业名称测试企业名称3"
				},
				{
					"carNum": "津D68765",
					"time": "2024-12-18 23:28:59",
					"comName": "测试企业名称测试企业名称4"
				},
				{
					"carNum": "津D68765",
					"time": "2024-12-18 23:28:59",
					"comName": "测试企业名称测试企业名称5"
				},
				{
					"carNum": "津D68765",
					"time": "2024-12-18 23:28:59",
					"comName": "测试企业名称测试企业名称6"
				}
			]
		},
		//设置企业告警数据
		setWarningComData() {
			getWarningComData().then(res => {
			    this.warningComDataList = res.data;
			}).catch(error => {
			
			});
			var warningComDataListTest = [
				{
					"SBL": "78",
					"time": "2024-12-18 23:28:59",
					"comName": "测试企业名称测试企业名称1"
				},
				{
					"SBL": "79",
					"time": "2024-12-18 23:28:59",
					"comName": "测试企业名称测试企业名称2"
				},
				{
					"SBL": "68",
					"time": "2024-12-18 23:28:59",
					"comName": "测试企业名称测试企业名称3"
				},
				{
					"SBL": "56",
					"time": "2024-12-18 23:28:59",
					"comName": "测试企业名称测试企业名称4"
				},
				{
					"SBL": "75",
					"time": "2024-12-18 23:28:59",
					"comName": "测试企业名称测试企业名称5"
				},
				{
					"SBL": "77",
					"time": "2024-12-18 23:28:59",
					"comName": "测试企业名称测试企业名称6"
				}
			]
		},
		//企业详情弹窗
		openComDetailDialog() {
			this.tabsDialogParams.objItem = this.companyTableList[0];
			//this.tabsDialogParams.objItem = this.currMarketData;
			this.tabsDialogParams.openType = "map";
			this.tabsDialogParams.dialogVisible = true;
		},
		openComDetailFromWarning(item) {
			alert(item.reason.split("[")[2].replace("]",""));
			//去获取企业详细信息
			return;
			this.tabsDialogParams.objItem = this.currMarketData;
			this.tabsDialogParams.openType = "warningCom";
			this.tabsDialogParams.dialogVisible = true;
		},
		openCarDetailFromWarning(item) {
			alert(item.subject);
			this.carDialogParams.objRecord = item;
			this.carDialogParams.dialogVisible = true;
		},
		
		translateToGCJ(wgsLon, wgsLat) {
			var GPS = {
				PI: 3.14159265358979324,
				x_pi: 3.14159265358979324 * 3000.0 / 180.0,
				delta: function (lat, lon)
				{
					var a = 6378245.0; //  a: 卫星椭球坐标投影到平面地图坐标系的投影因子。
					var ee = 0.00669342162296594323; //  ee: 椭球的偏心率。
					var dLat = this.transformLat(lon - 105.0, lat - 35.0);
					var dLon = this.transformLon(lon - 105.0, lat - 35.0);
					var radLat = lat / 180.0 * this.PI;
					var magic = Math.sin(radLat);
					magic = 1 - ee * magic * magic;
					var sqrtMagic = Math.sqrt(magic);
					dLat = (dLat * 180.0) / ((a * (1 - ee)) / (magic * sqrtMagic) * this.PI);
					dLon = (dLon * 180.0) / (a / sqrtMagic * Math.cos(radLat) * this.PI);
					return { 'lat': dLat, 'lon': dLon };
				},
			
				//WGS-84 to GCJ-02
				gcj_encrypt: function (wgsLat, wgsLon)
				{
					if (this.outOfChina(wgsLat, wgsLon))
						return { 'lat': wgsLat, 'lon': wgsLon };
					
					var d = this.delta(wgsLat, wgsLon);
					return { 'lat': wgsLat + d.lat, 'lon': wgsLon + d.lon };
				},
				//GCJ-02 to WGS-84
				gcj_decrypt: function (gcjLat, gcjLon)
				{
					if (this.outOfChina(gcjLat, gcjLon))
						return { 'lat': gcjLat, 'lon': gcjLon };
			
					var d = this.delta(gcjLat, gcjLon);
					return { 'lat': gcjLat - d.lat, 'lon': gcjLon - d.lon };
				},
				//GCJ-02 to WGS-84 exactly
				gcj_decrypt_exact: function (gcjLat, gcjLon)
				{
					var initDelta = 0.01;
					var threshold = 0.000000001;
					var dLat = initDelta, dLon = initDelta;
					var mLat = gcjLat - dLat, mLon = gcjLon - dLon;
					var pLat = gcjLat + dLat, pLon = gcjLon + dLon;
					var wgsLat, wgsLon, i = 0;
					while (1)
					{
						wgsLat = (mLat + pLat) / 2;
						wgsLon = (mLon + pLon) / 2;
						var tmp = this.gcj_encrypt(wgsLat, wgsLon)
						dLat = tmp.lat - gcjLat;
						dLon = tmp.lon - gcjLon;
						if ((Math.abs(dLat) < threshold) && (Math.abs(dLon) < threshold))
							break;
			
						if (dLat > 0) pLat = wgsLat; else mLat = wgsLat;
						if (dLon > 0) pLon = wgsLon; else mLon = wgsLon;
			
						if (++i > 10000) break;
					}
					//console.log(i);
					return { 'lat': wgsLat, 'lon': wgsLon };
				},
				//GCJ-02 to BD-09
				bd_encrypt: function (gcjLat, gcjLon)
				{
					var x = gcjLon, y = gcjLat;
					var z = Math.sqrt(x * x + y * y) + 0.00002 * Math.sin(y * this.x_pi);
					var theta = Math.atan2(y, x) + 0.000003 * Math.cos(x * this.x_pi);
					var bdLon = z * Math.cos(theta) + 0.0065;
					var bdLat = z * Math.sin(theta) + 0.006;
					return { 'lat': bdLat, 'lon': bdLon };
				},
				//BD-09 to GCJ-02
				bd_decrypt: function (bdLat, bdLon)
				{
					var x = bdLon - 0.0065, y = bdLat - 0.006;
					var z = Math.sqrt(x * x + y * y) - 0.00002 * Math.sin(y * this.x_pi);
					var theta = Math.atan2(y, x) - 0.000003 * Math.cos(x * this.x_pi);
					var gcjLon = z * Math.cos(theta);
					var gcjLat = z * Math.sin(theta);
					return { 'lat': gcjLat, 'lon': gcjLon };
				},
				//WGS-84 to Web mercator
				//mercatorLat -> y mercatorLon -> x
				mercator_encrypt: function (wgsLat, wgsLon)
				{
					var x = wgsLon * 20037508.34 / 180.;
					var y = Math.log(Math.tan((90. + wgsLat) * this.PI / 360.)) / (this.PI / 180.);
					y = y * 20037508.34 / 180.;
					return { 'lat': y, 'lon': x };
				},
				// Web mercator to WGS-84
				// mercatorLat -> y mercatorLon -> x
				mercator_decrypt: function (mercatorLat, mercatorLon)
				{
					var x = mercatorLon / 20037508.34 * 180.;
					var y = mercatorLat / 20037508.34 * 180.;
					y = 180 / this.PI * (2 * Math.atan(Math.exp(y * this.PI / 180.)) - this.PI / 2);
					return { 'lat': y, 'lon': x };
				},
				// two point's distance
				distance: function (latA, lonA, latB, lonB)
				{
					var earthR = 6371000.;
					var x = Math.cos(latA * this.PI / 180.) * Math.cos(latB * this.PI / 180.) * Math.cos((lonA - lonB) * this.PI / 180);
					var y = Math.sin(latA * this.PI / 180.) * Math.sin(latB * this.PI / 180.);
					var s = x + y;
					if (s > 1) s = 1;
					if (s < -1) s = -1;
					var alpha = Math.acos(s);
					var distance = alpha * earthR;
					return distance;
				},
				outOfChina: function (lat, lon)
				{
					if (lon < 72.004 || lon > 137.8347)
						return true;
					if (lat < 0.8293 || lat > 55.8271)
						return true;
					return false;
				},
				transformLat: function (x, y)
				{
					var ret = -100.0 + 2.0 * x + 3.0 * y + 0.2 * y * y + 0.1 * x * y + 0.2 * Math.sqrt(Math.abs(x));
					ret += (20.0 * Math.sin(6.0 * x * this.PI) + 20.0 * Math.sin(2.0 * x * this.PI)) * 2.0 / 3.0;
					ret += (20.0 * Math.sin(y * this.PI) + 40.0 * Math.sin(y / 3.0 * this.PI)) * 2.0 / 3.0;
					ret += (160.0 * Math.sin(y / 12.0 * this.PI) + 320 * Math.sin(y * this.PI / 30.0)) * 2.0 / 3.0;
					return ret;
				},
				transformLon: function (x, y)
				{
					var ret = 300.0 + x + 2.0 * y + 0.1 * x * x + 0.1 * x * y + 0.1 * Math.sqrt(Math.abs(x));
					ret += (20.0 * Math.sin(6.0 * x * this.PI) + 20.0 * Math.sin(2.0 * x * this.PI)) * 2.0 / 3.0;
					ret += (20.0 * Math.sin(x * this.PI) + 40.0 * Math.sin(x / 3.0 * this.PI)) * 2.0 / 3.0;
					ret += (150.0 * Math.sin(x / 12.0 * this.PI) + 300.0 * Math.sin(x / 30.0 * this.PI)) * 2.0 / 3.0;
					return ret;
				}
			};
			//alert("字符串转数值：" + (wgsLat*100000000/100000000));
			//GPS的方法中对经纬度的运算都是数值型，所以GPS入参先转为数值型
			//GPS转高德
			//var gcjPoint = GPS.gcj_encrypt((wgsLat*100000000/100000000),(wgsLon*100000000/100000000));
			//return { 'lat': gcjPoint.lat, 'lon': gcjPoint.lon };
			//高德转百度 （GPS转百度，要先转高德，再转百度）
			//var BDPoint = GPS.bd_encrypt(gcjPoint.lat,gcjPoint.lon);
			//return { 'lat': gcjPoint.lat, 'lon': gcjPoint.lon };
			//百度转高德
			var gcjPoint = GPS.bd_decrypt((wgsLat*100000000/100000000),(wgsLon*100000000/100000000));
			return { 'lat': gcjPoint.lat, 'lon': gcjPoint.lon };
			
		},
    },
}
</script>

<style>
	.el-dialog__body {
		padding: 0px 20px 20px 20px;
	}
	::-webkit-scrollbar{
		/*width: 0;宽度为0隐藏*/
		height: 6px;
		width: 3px;
	}
	::-webkit-scrollbar-thumb{
	    border-radius: 2px;
	    height: 50px;
	    background-color: #00aaff;
	}
	::-webkit-scrollbar-track{
	    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
	    border-radius: 0px;
	    /*background-color: rgba(62, 106, 181, 0.8);*/
		background-color: rgba(0, 170, 255, 0.2);
	}
	
	.amap-logo {
		display: none;
		opacity: 0 !important;
	}
	.amap-copyright {
		opacity: 0;
	}
	.amap-marker-label {
	    position: absolute;
	    z-index: 2;
	    border: 0px solid blue;
	    background-color: rgba(31, 107, 134, 0.8);
		color: #ffaa00;
	    white-space: nowrap;
	    cursor: default;
	    padding: 3px;
	    font-size: 12px;
	    line-height: 14px;
	}
	
</style>
<style scoped>
	.map_menu {
		position:absolute;
		z-index: 1;
		right: 32vw;
		bottom: 1vh;
		/*
		background-color: rgba(97, 118, 131, 1);
		*/
		border-radius: 5px;
		display: flex;
	}
.bigScreenBodyDiv {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	background: no-repeat center top;
	background-size: cover;
}

.bigScreenHeader {
	width: 100%;
	height: 60px;
	display: flex;
	z-index: 1;
	color: #333;
	text-align: center;
}

.bigScreenBodyDivMain {
	flex: 1;
	width: 100%;
	display: flex;
}

.mappanel {
	background-color: rgba(27, 111, 250, 0);
	border: 0px solid rgba(27, 111, 250, 0.3) !important;
}

.outpanel {
	background-color: rgba(27, 111, 250, 0);
	border: 1px solid rgba(27, 111, 250, 0.3) !important;
	display: flex;
	flex-direction: column;
	margin-top: 10px;
}

.inpanel {
	display: flex;
	flex-direction: column;
	margin-top: 10px;
	background-color: rgba(27, 111, 250, 0);
}

.leftinpanel {
	border: 1px solid rgba(34, 170, 211, 0.8);
	border-image: -webkit-linear-gradient(top left, #00aaff 25%, rgba(27, 111, 250, 0.3) 50%, rgba(27, 111, 250, 0) 75%, rgba(27, 111, 250, 0) 95%) 10 10 10 10;
}

.rightinpanel {
	border: 1px solid rgba(34, 170, 211, 0.8);
	border-image: -webkit-linear-gradient(top right, #00aaff 25%, rgba(27, 111, 250, 0.3) 50%, rgba(27, 111, 250, 0) 75%, rgba(27, 111, 250, 0) 95%) 10 10 10 10;
}

.inpanel-title {
	width: 100%;
	height: 1.875rem;
	display: flex;
	padding-left: 1rem;
	background-color: rgba(27, 111, 250, 0);
	border: 0px solid rgba(27, 111, 250, 0.3) !important;
	border-bottom: 0px solid rgba(27, 111, 250, 0.5) !important;

}

.inpanel-title-left {
	width: 40%;
	height: 100%;
	text-align: left;
	line-height: 1.875rem;
	font-size: 0.875rem;
	color: #ffffff;
}

.inpanel-title-center {
	flex: 1;
	height: 100%;
	padding: 0.1875rem;
	line-height: 1.5rem;
	text-align: right;
}

.inpanel-title-right {
	width: 140px;
	height: 100%;
	/*
		line-height: 1.5rem;
		*/
	padding: 0rem 0.65rem;
	text-align: right;
	line-height: 1.875rem;
	font-size: 0.875rem;
	color: #ffffff;
}

.iconmore {
	color: #00B0FF;
	padding-right: 0.3125rem;
}

.el-checkbox__inner {
	background-color: rgba(0, 49, 72, 0.8);
	border: 1px solid rgba(0, 82, 120, 0.8);
}

.home_div {
	padding: 0px;
	margin: 0px;
	width: 100%;
	height: 100%;
	position: relative;
}

#container {
	padding: 0px;
	margin: 0px;
	width: 100%;
	height: calc(100% - 0px);
	position: absolute;
}

.map_alerm {
	position: absolute;
	z-index: 1;
	width: 30%;
	height: 150px;
	left: 35%;
	bottom: 10px;
	background-image: linear-gradient(to bottom, rgba(11, 58, 87, 0.8), rgba(11, 58, 87, 0.7), rgba(11, 58, 87, 0.7), rgba(11, 58, 87, 0.8), rgba(11, 58, 87, 0.8), rgba(11, 58, 87, 0.8), rgba(11, 58, 87, 0.9), rgba(11, 58, 87, 0.9), rgba(11, 58, 87, 0.9));
	border-radius: 5px;
	display: flex;
}

.map_left {
	position: absolute;
	z-index: 1;
	width: 30%;
	height: 100%;
	left: 0px;
	/*background-color: rgba(97, 118, 131, 0.8);*/
	/*background-image: linear-gradient(to right, rgb(1, 7, 41), rgba(1, 7, 41, 1), rgba(1, 7, 41, 1), rgba(1, 7, 41, 1), rgba(1, 7, 41, 0.8), rgba(1, 7, 41, 0.6), rgba(1, 7, 41, 0.5), rgba(1, 7, 41, 0.4), rgba(1, 7, 41, 0.2), rgba(1, 7, 41, 0));*/
	background-image: linear-gradient(to right, rgb(9, 21, 42), rgba(9, 21, 42, 1), rgba(9, 21, 42, 1), rgba(9, 21, 42, 1), rgba(9, 21, 42, 0.8), rgba(9, 21, 42, 0.6), rgba(9, 21, 42, 0.5), rgba(9, 21, 42, 0.4), rgba(1, 7, 41, 0.2), rgba(9, 21, 42, 0));
	border-radius: 5px;
}

.map_right {
	position: absolute;
	z-index: 1;
	width: 30%;
	height: 100%;
	right: 0px;
	/*background-color: rgba(1, 7, 41, 0.5);*/
	/*background: linear-gradient(to bottom right, rgba(1, 7, 41, 0) 10%, rgba(1, 7, 41, 0.3) 30%, rgba(1, 7, 41, 0.4) 50%, rgba(1, 7, 41, 0.8) 70%, rgba(1, 7, 41, 1) 100%);
	*/
	/*background-image: linear-gradient(to right, rgba(9, 21, 42, 0), rgba(9, 21, 42, 0.3), rgba(9, 21, 42, 0.4), rgba(9, 21, 42, 0.5), rgba(9, 21, 42, 0.6), rgba(9, 21, 42, 0.7), rgba(9, 21, 42,0.8), rgba(9, 21, 42,0.9), rgba(9, 21, 42, 1), rgba(9, 21, 42, 1));
	*/
	background-image: linear-gradient(to right, rgba(9, 21, 42, 0), rgba(9, 21, 42, 0.3), rgba(9, 21, 42, 0.6), rgba(9, 21, 42,0.8), rgba(9, 21, 42, 1), rgba(9, 21, 42, 1), rgba(9, 21, 42, 1), rgba(9, 21, 42, 1));
   
	border-radius: 5px;
}

.blockTitle {
	width: 100%;
	height: 1.5vw;
	color: #ffffff;
	text-align: center;
	display: table;
	border-bottom: 1px solid rgba(34, 170, 211, 0.8);
	border-image: linear-gradient(to right, rgba(27, 111, 250, 0) 0%, rgba(27, 111, 250, 0.3) 25%, #00aaff 50%, rgba(27, 111, 250, 0.3) 75%, rgba(27, 111, 250, 0) 100%) 10 10 10 10;
}
.blockTitleText {
	width: 100%;
	height: 100%;
	display: table-cell;
	vertical-align: middle;
	font-size: 0.8vw;
}
</style>
<style>
	.el-table {
		background-color: #090f1a;
		opacity: 0.8;
	}
	.el-table th {
	    overflow: hidden;
	    -webkit-user-select: none;
	    -moz-user-select: none;
	    -ms-user-select: none;
	    user-select: none;
	    background-color: #062756;
	}
	.el-table th.is-leaf, .el-table td {
	    border-bottom: 1px solid #1E7EF4;
	}
	
	.el-table tbody tr>td {
		background-color: #090f1a !important;
	}
	.el-table tbody tr:hover>td {
		background-color: #365795 !important;
		color: #00ffff;
	} 
	.el-table__body-wrapper::-webkit-scrollbar{
		/*width: 0;宽度为0隐藏*/
		width: 3px;
	}
	.el-table__body-wrapper::-webkit-scrollbar-thumb{
	    border-radius: 2px;
	    height: 50px;
	    background-color: #55aaff;
	}
	.el-table__body-wrapper::-webkit-scrollbar-track{
	    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
	    border-radius: 0px;
	    background-color: rgba(9, 15, 26, 0.8);
	}
</style>